<template>
  <div class="ImgList">
    <template v-for="(item, index) in data">
      <ElImgBox class="ImgList-item" :width="width" :height="width" :data="item" :urlKey="urlKey" :isDel="isEdit"
        :operate="isEdit ? operate : []" />
    </template>
    <ElUploadBox @changeBtn="changeBtn" :accept="accept" type="all" :style="{
      width: `${width}px`,
      height: `${width}px`,
    }" v-if="isEdit">
      <el-icon size="26">
        <Plus />
      </el-icon>
    </ElUploadBox>
  </div>
</template>
<script setup lang="ts">
import { getCurrentInstance } from 'vue';
const { proxy } = getCurrentInstance() as any;
//获取父级数据
const props = withDefaults(
  defineProps<{
    data: any;
    urlKey?: string;
    url?: string;
    size?: string; //尺寸 '' | 'large' | 'default' | 'small'
    placeholder?: string; //输入框占位文本
    disabled?: boolean; //是否禁用
    isEdit?: boolean; //是否编辑
    type?: string; //类型文本-text  密码-password  文本-textarea
    width?: number | string; //宽度
    accept?: any; //文件条件
    operate?: any; //列表操作
  }>(),
  {
    width: 160,
    type: 'text',
    size: 'default',
    urlKey: 'url',
    autosize: true,
    placeholder: '请上传文件',
    accept: '.jpg,.jpeg,.png,.gif',
  },
);
const emit = defineEmits<{
  //fn为父组件引入子组件是定义的子组件事件属性，可随意定义
  (event: 'delBtn', files: any, index: number, arr: any): void;
  (event: 'changeBtn', files: any, dataInfo: any, res: any): void;
}>();
const changeBtn = (files: any, dataInfo: any, res: any) => {
  emit('changeBtn', files, dataInfo, res);
};
onMounted(() => { });
</script>
<style lang="scss">
.ImgList {
  --m: 10px;
  display: flex;
  flex-wrap: wrap;
  margin-right: calc(var(--m) * -1);
  margin-bottom: calc(var(--m) * -1);

  >* {
    border: 1px #{$border1} solid;
    margin-right: var(--m);
    margin-bottom: var(--m);
    overflow: hidden;

    &:hover {
      border-color: #{$primary};
    }
  }

  .upload-demo {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>
